<template>
  <van-cell-group>
    <van-nav-bar class="head" title="农友有说" left-text left-arrow @click-left="onClickLeft" />
    <!-- <van-skeleton title avatar :row="19" /> -->
    <div class="place"></div>

    <div style="width: 100%;height: 100%;overflow-y: scroll;">
      <div class="van-c">{{article.title}}</div>
      <div class="content" v-html="article.content"></div>
    </div>
  </van-cell-group>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      article: {},
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/friend");
    },
    onQueryByKey() {
      let qid = this.$route.query;
      const parama = qs.stringify({
        "article.id": qid.id,
      });
      this.$axios
        .post("http://127.0.0.1:1995/article/queryByKey", parama)
        .then((res) => {
          console.log(res);
          this.article = res.data.datas.acc;
        });
    },
  },
  mounted() {
    this.loading = false;
    this.onQueryByKey();
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  height: 3rem;
  background-color: #069ffd;
  position: fixed;
}
.van-nav-bar__title {
  color: #ffff;
  padding-top: 9px;
  font-size: 1.5rem;
  text-align: center;
}
.van-nav-bar .van-icon {
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
}
.van-c {
  color: #323233;
  text-align: center;
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0 13px;
  line-height: 44px;
  height: 100%;
}
.content {
  text-align: left;
  padding: 17px;
}
.pgc-img img {
  width: 100% !important;
  height: 100%;
}
.place {
  height: 3rem;
}
</style>
